<template>
  <div class="course-info">
    <van-cell-group :style="styleOption">
      <!-- 课程图片展示 -->
      <van-cell class="imgShow">
        <van-image
          :src="courseInfo.courseImgUrl"
        />
      </van-cell>
      <!-- 课程基本信息 -->
      <van-cell>
        <h2 v-text="courseInfo.courseName"></h2>
        <p v-text="courseInfo.previewFirstField"></p>
        <div class="course-detail">
          <div class="priceContainer">
            <span>¥{{courseInfo.discounts}}</span>
            <span>¥{{courseInfo.price}}</span>
          </div>
          <div class="basicInfo">
            <span>{{courseInfo.sales}}人已购</span>
            <span>每周三、五更新</span>
          </div>
        </div>
      </van-cell>
      <!-- 课程内容信息 -->
      <van-cell class="courseCntent">
        <van-tabs v-model="active" scrollspy sticky>
          <van-tab title="详情">
            <div v-html="courseInfo.courseDescription"></div>
          </van-tab>
          <van-tab title="内容">
            <section-content
              v-for="item in courseContent"
              :key="item.id"
              :sectionData="item"
            ></section-content>
          </van-tab>
        </van-tabs>
      </van-cell>
    </van-cell-group>
    <!-- 底部购买栏 -->
    <van-tabbar v-if="!courseInfo.isBuy">
      <div class="price">
        <span>{{courseInfo.discountsTag}}</span>
        <span>¥{{courseInfo.discounts}}</span>
        <span>¥{{courseInfo.price}}</span>
      </div>
      <van-button type="primary" @click="handleBuy">立即购买</van-button>
    </van-tabbar>
  </div>
</template>

<script>
import { CellGroup, Cell, Image, Tabs, Tab, Tabbar, Button } from 'vant'
import { getCourseById, getSectionAndLesson } from '@/services/course'
import sectionContent from './components/sectionContent'
export default {
  name: 'course-info',
  components: {
    sectionContent,
    VanCellGroup: CellGroup,
    VanCell: Cell,
    VanImage: Image,
    VanTabs: Tabs,
    VanTab: Tab,
    VanTabbar: Tabbar,
    VanButton: Button
  },
  props: {
    id: {
      type: [String, Number],
      require: true
    }
  },
  data () {
    return {
      courseInfo: {},
      active: 1,
      courseContent: {},
      // 样式信息
      styleOption: {}
    }
  },
  created () {
    this.getCourseById()
    this.getSectionAndLesson()
  },
  methods: {
    // 获取课程详情
    async getCourseById () {
      const { data } = await getCourseById({
        courseId: this.id
      })
      if (data.state === 1) {
        this.courseInfo = data.content
      }
      // 如果当前课程的isBay为true,那么就清除掉固定定位的bottom的值
      if (data.content.isBuy) {
        this.styleOption.bottom = 0
      }
    },
    // 获取课程章节
    async getSectionAndLesson () {
      const { data } = await getSectionAndLesson({
        courseId: this.id
      })
      console.log(data)
      if (data.state === 1) {
        this.courseContent = data.content.courseSectionList
      }
    },
    // 立即购买
    handleBuy () {
      const id = this.id
      if (this.$store.state.user) {
        // 用户登陆了直接跳转到支付页面
        this.$router.push({
          name: 'pay',
          params: { id }
        })
      } else {
        // 未登录则跳转到登录页,并记录本页信息,信息成功后跳回到该页
        this.$router.push({
          name: 'login',
          query: {
            redirect: this.$route.fullPath
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell-group{
  width: 100%;
}
.imgShow{
  padding: 0;
  .van-cell__value{
    height: 280px;
  }
   .van-image{
     height: 100%;
     width: 100%;
  }
}
.course-detail{
  display: flex;
  justify-content: space-between;
  .priceContainer{
    span:nth-child(1){
      font-size: 24px;
      font-weight: 700;
      color: #ff7452;
      margin-right: 8px;
    }
  }
  .basicInfo{
    span{
      display: inline-block;
      color: #666;
      background-color: #f8f9fa;
      padding: 7px 8px;
      border-radius: 3px;
    }
    span:nth-child(1){
      margin-right: 10px;
    }
  }
}
.courseCntent{
  padding: 0;
  .van-tab__pane{
    img{
      width: 100% !important;
    }
  }
}
.van-cell-group{
  position: fixed;
  overflow-y: auto;
  top: 0;
  bottom: 50px;
}
.van-tabbar{
  line-height: 50px;
  padding: 0 20px;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
}
.price{
  font-size: 14px;
  span:nth-child(2){
    font-size: 24px;
    color: #ff7452;
    margin: 0 6px;
  }
}
.van-button{
  width: 150px;
  margin-top: 3px;
}
</style>
